<template>
  <section class="detail-box">
    <!--<el-row type="flex" justify="space-between" class="detail-top-nav">
      <span>签约信息</span>
    </el-row>-->
    <el-row class="detail-top-nav">缴费详情</el-row>
    <div class="ordeNo"> 缴费单号: <span></span></div>
    <el-row class="detail-info">
      <div class="info-title">缴费人信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">姓名：</span>
          <span>{{detailInfo.socialCompanyName}}</span>
        </div>
        <div class="info-item">
          <span class="left">身份证号：</span>
          <span>{{detailInfo.socialCompanyCode}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail-info">
      <div class="info-title">缴费信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">缴费项目：</span>
          <span>{{detailInfo.socialPaymentSkuName}}</span>
        </div>
        <div class="info-item">
          <span class="left">缴费金额：</span>
          <span>¥{{detailInfo.price | currency}}</span>
        </div>
        <!-- <div class="info-item">
          <span class="left">学号</span>
          <span>{{detailInfo.infoNo}}</span>
        </div> -->
        <div class="info-item">
          <span class="left">手续费：</span>
          <span>¥{{detailInfo.factorage | currency}}</span>
        </div>
        <div class="info-item">
          <span class="left">支付总额</span>
          <span>¥{{detailInfo.price | currency}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">支付总额</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">支付方式</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">支付时间</div></el-col>
      <el-col :span="6"><div class="grid-content onelast bg-purple-light">第三方流水号</div></el-col>
      <el-col :span="6"><div class="grid-contenttwo bg-purple">¥{{detailInfo.price | currency}}</div></el-col>
      <el-col :span="6"><div class="grid-contenttwo bg-purple-light">微信支付</div></el-col>
      <el-col :span="6"><div class="grid-contenttwo bg-purple">{{detailInfo.payTime | timeFormat('yyyy-MM-dd hh:mm:ss')}}</div></el-col>
      <el-col :span="6"><div class="grid-contenttwo twolast bg-purple-light">{{detailInfo.tradeNo}}</div></el-col>
    </el-row>
  </section>
</template>
<script>
import { getPayDetial } from 'api/social/payManage/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      detailInfo: { // 详情信息
      }
    }
  },
  created () {
    getPayDetial({
      id: Number(common.params('id'))
    }).then(res => {
      this.detailInfo = res.data
      this.detailInfo.totalPrice = res.data.price + res.data.factorage
    })
  }
}
</script>
<style lang="less" scoped>
  .detail-box {
    padding: 20px 10px 0;
    .detail-top-nav {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .ordeNo {
      padding: 0 0 16px 0px;
    }
    .grid-content {
      text-align: center;
      border: 1px solid #ccc;
      line-height: 60px;
      min-height: 36px;
      border-bottom: none;
      border-right: none;
      height: 60px;
    }
    .onelast {
      border-right: 1px solid #ccc;
    }
    .grid-contenttwo {
      text-align: center;
      border: 1px solid #ccc;
      line-height: 60px;
      min-height: 36px;
      height: 60px;
      border-right: none;
    }
        .twolast {
      border-right: 1px solid #ccc;
    }
    .detail-info {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 12px 10px 0;
      margin-bottom: 20px;
      .info-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
        padding-left: 10px;
      }
      .info-list {
        padding: 20px 0;
      }
      .info-item {
        padding-left: 10px;
        padding-bottom: 10px;
        color: #4f4f4f;
      }
      .info-sub {
        padding-left: 10px;
        color: #d1d1d1;
        font-size: 14px;
        span {
          display: inline-flex;
          width: 14px;
          height: 14px;
          border: 1px solid #ccc;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }
      .info-item:last-child {
        padding-bottom: 0;
      }
      .left {
        display: inline-block;
        width: 120px;
        text-align: left;
        color: gray;
      }
    }
  }
</style>
